import { useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { Tabs, class_esy, isArray, isEmpty } from 'esy-ui';
import dayjs from 'dayjs';
import { Empty, Header } from '@/components';
import { postBetRecord, postGameType } from '@/services';
import { useGlobalStore, useUserInfoStore } from '@/mobx';
import { useFormatText } from '@/hooks';
import QuickNav from '../quick-nav';

const tts = [
  {
    tKey: 'text_43',
    vKey: 'BetAmount',
  },
  {
    tKey: 'text_174',
    vKey: 'ValidAmount',
  },
  {
    tKey: 'text_44',
    vKey: 'WinAmount',
  },
];

function RenderTitle(props: any) {
  const { title, isActive } = props;
  return <div className={class_esy(['text-sm font-bold', isActive ? 'text-primary' : 'text-color-17'])}>{title}</div>;
}

function RenderContent(props: any) {
  const { data, changeState } = props;
  const [betRecord, setBetRecord] = useState([]);
  const { text } = useFormatText();
  const [allScore, setAllScore] = useState({});

  useEffect(() => {
    if (typeof data?.Id === 'number') {
      if (changeState) changeState('isLoading', true);
      postBetRecord({ ClassID: data?.Id })
        .then((res: any) => {
          if (isArray(res?.Data)) {
            let bts = 0;
            let vs = 0;
            let pcs = 0;
            res?.Data.forEach((it) => {
              bts += it.BetAmount;
              vs += it.ValidAmount;
              pcs += it.WinAmount;
            });
            setAllScore({ BetAmount: bts, ValidAmount: vs, WinAmount: pcs });
            setBetRecord(res?.Data);
          }
        })
        .catch(() => {})
        .finally(() => {
          if (changeState) changeState('isLoading', false);
        });
    }
  }, [changeState, data?.Id]);

  if (isEmpty(betRecord)) return <Empty />;

  return (
    <div className='bg-white h-full overflow-y-auto overflow-x-hidden text-black text-xs px-2.5'>
      <div className='bg-color-19 flex items-center mt-2'>
        <div className='w-12 py-2' />
        {tts.map((its) => (
          <div key={its.tKey} className='flex flex-1 items-center py-2 mx-3 justify-center'>
            {text(its.tKey)}
          </div>
        ))}
      </div>
      <div className='flex items-center border-b border-l border-r border-solid border-color-20'>
        <div className='w-12 text-center py-2'>{text('text_45')}</div>
        {tts.map((its) => (
          <div key={its.tKey} className='flex flex-1 items-center py-2 mx-3 justify-center'>
            {allScore[its.vKey]}
          </div>
        ))}
      </div>
      {betRecord.map((it, i) => (
        <div key={it.Id || i} className='border border-solid border-color-20 rounded my-2.5'>
          <div className='bg-color-19 flex items-center py-2 px-3'>
            <div className='w-20'>{text('text_42')}</div>
            <div>{dayjs(`${it.DateFlag}`).format('YYYY-MM-DD')}</div>
          </div>
          {tts.map((its) => (
            <div key={its.tKey} className='border-b border-solid border-color-20 last:border-none flex items-center py-1.5 mx-3'>
              <div className='w-20'>{text(its.tKey)}</div>
              <div>{it[its.vKey]}</div>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

function Record() {
  const { userInfo } = useUserInfoStore();
  const { text } = useFormatText();
  const [types, setTypes] = useState([]);
  const { changeState } = useGlobalStore();

  useEffect(() => {
    if (userInfo?.Token) {
      changeState('isLoading', true);
      postGameType({})
        .then((res: any) => {
          setTypes(res?.Data);
          if (isArray(res?.Data)) {
            setTypes([{ title: text('text_41'), paneKey: -1, contentData: { Id: -1 } }, ...res.Data.map((it) => ({ title: it.Name, paneKey: it.Id, contentData: it }))]);
          }
        })
        .catch(() => {});
    }
    return () => {
      changeState('isLoading', false);
    };
  }, [changeState, text, userInfo?.Token]);

  return (
    <div className='bg-body-2 h-full flex flex-col'>
      <Header title='text_6' isGoHome />
      <QuickNav />
      {isEmpty(types) ? (
        <Empty />
      ) : (
        <Tabs
          classNames={{ titles: 'relative text-base flex-nowrap bg-white' }}
          tabs={types}
          isDestroyUnactive
          renderTitle={<RenderTitle />}
          renderContent={<RenderContent changeState={changeState} />}
        />
      )}
    </div>
  );
}

export default observer(Record);
